<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="../js/wangEditor.min.js"></script>
    <script src="text/highlight.min.js"></script>
    <link href="text/atom-one-dark.css" rel="stylesheet">

    <!--发布新闻-->
    <!--发布新闻-->
    <!--发布新闻-->

    <style type="text/css">

        #div1{

            margin-left: 460px;
            width: 800px;
            height: 500px;

        }
        /*.demo-input-suffix{ margin-left: 20px;*/
        /*margin-top: 10px;*/
        /*}*/
        /*.col-md-5{*/
        /*margin-left: 250px;*/
        /*border-radius: 10px;*/
        /*}*/
        /*.a1{*/
        /*margin-bottom: 50px ;*/
        /*width: 100px;*/
        /*height: 39px;*/
        /*}*/

        /*body{background-image: url("https://img1.baidu.com/it/u=1https://img0.baidu.com/it/u=1077257707,855832289&fm=26&fmt=auto");}*/

        /*.w-e-menu {*/
        /*z-index: 2 !important;*/
        /*}*/
        /*.w-e-text-container {*/
        /*z-index: 1 !important;*/
        /*}*/

    </style>
</head>
<body>
<div id="app">
    <el-form id="newData" :rules="rules" ref="search"  :model="search"  class="demo-form-inline" style="width: 200px; margin-left: 20px;">
        <el-form-item label="新闻标题" prop="total" style="width: 300px; ">
            <el-input v-model="search.total" placeholder="新闻标题" name="total"></el-input>
        </el-form-item>

        <el-form-item label="新闻类型" prop="cid" style="width: 200px ;background-color: white;">
            <select v-model="search.cid" placeholder="新闻类型" name="cid" style="background-color: white;width: 220px; height: 40px; border-radius:6px">
                <option v-for="(c,i) in categoryArr" :label="c.category" :value="c.id"></option>
            </select>
        </el-form-item>

        <el-form-item label="时间" prop="time">
            <el-date-picker  name="time"
                             label="时间"
                             prop="time"
                             value-format="yyyy-MM-dd HH:mm:ss"
                             v-model="search.time"
                             type="datetime"
                             placeholder="选择日期时间"
                             align="right"
                             :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="新闻内容" prop="content">
            <div id="div1">
                <!--<p v-html="search.content"></p>-->
            </div>
            <textarea id="text1" style="width:100%; height:200px;display: none"   name="content"></textarea>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" plain icon="el-icon-s-promotion"  @click="addNews()">上传</el-button>
        </el-form-item>
    </el-form>
</div>
<script>


    $.get("/ssm/category/list",function (backData) {
        haha.categoryArr= backData.data;
    });

    var haha = new Vue({
        el:"#app",
        data:{
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            search:{},
            categoryArr:[],
            rules:{
                total: [
                    { required: true, message: '请输入新闻标题', trigger: 'blur' },
                ],
                time: [
                    { required: true, message: '请选择时间', trigger: 'blur' },
                ],
                cid: [
                    { required: true, message: '请选择新闻类别', trigger: 'change' },
                ]
            }
        },
        methods:{
            addNews(){
                haha.$refs["search"].validate((valid) => {
                    if (valid) {
                        var xinData = new FormData(newData);
                        $.ajax({
                            url:"/ssm/news/addNews",
                            type:"POST",
                            data:xinData,
                            processData:false,
                            contentType:false,
                            success:function(backData){
                                if(backData.code == 1) {
                                    haha.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    window.location.reload();
                                }else if (backData.code === 2){
                                    haha.$message({
                                        message: '添加失败',
                                        type: 'error'
                                    });
                                }
                            }
                        });
                    };
                });
                //
            },
        },
    });
</script>
<script src="../js/wangEditor.min.js"></script>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor;
    const editor = new E('#div1');
    const $text1 = $('#text1');
    editor.config.placeholder = '新闻内容';
    editor.config.height = 350;
    editor.config.uploadImgServer ='/ssm/upload/file';
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    editor.config.uploadImgMaxLength = 5;// 一次最多上传 5 个图片
    editor.config.uploadImgParams = {dir: 'bbs', x: 100};
    editor.config.uploadFileName = 'file';
    editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function(xhr) {
            console.log(xhr);

            // 可阻止图片上传
            return true;
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
            console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
            console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
            console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
            console.log('timeout')
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn,result) {
            console.log("地址是"+result);
            // result 即服务端返回的接口
            // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            insertImgFn(result.url);
        }
    };

    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $text1.val(html)
    };
    editor.create();

    // 第一步，初始化 textarea 的值
    $text1.val(editor.txt.html())
</script>
</body>
</html>